<template>
    <div id="bottom-right-bar" style="width: 100%; height: 280px">1</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import Lodash from 'lodash'

import echarts, { option } from './constant'
import { List } from '../../constant'
import type { ItemResponse } from '../../type'

export default defineComponent({
    name: 'BottomRightBar',
    setup() {
        const constant = {
            option
        }
        onMounted(() => {
            let { option } = constant
            let arr = Lodash.orderBy(List, 'repurchaseCounts', 'desc').slice(0, 9)

            option.xAxis[0].data = arr.map((el: ItemResponse) => el.name)
            option.series[0].data = arr.map((el: ItemResponse) => el.sales)

            option.series[1].data = arr.map((el: ItemResponse) => el.repurchaseCounts)

            echarts.init(document.getElementById('bottom-right-bar')).setOption(option)
        })
        return {
            ...constant
        }
    }
})
</script>
